<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>导航分类管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="${base}/plugin/vue/axios.min.js"></script>
    <script src="${base}/plugin/vue/formatDateTime.js"></script>
<link href="${base}/plugin/element/index.css" rel="stylesheet" >
<script src="${base}/plugin/element/index.js"></script>

</head>


<div id="vfor2">

	<el-container>
		<el-form :inline="true" :model="searchParams" class="demo-form-inline">
		  <el-form-item label="名称:">
		    <el-input v-model="searchParams.indexName" placeholder="名称:" @change="resetPage"></el-input>
		  </el-form-item>
		  <el-form-item label="导航ID:">
		    <el-input v-model="searchParams.id" placeholder="导航ID" @change="resetPage"></el-input>
		  </el-form-item>
		  <el-form-item label="类型:">
		    <el-select v-model="searchParams.type" placeholder="类型:" @change="resetPage" >
		      	<el-option label="私有" value="02"></el-option>
		        <el-option label="公开" value="01"></el-option>
		    </el-select>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="searchSubmit">查询</el-button>
		  </el-form-item>
		</el-form>
	</el-container>
	
    <el-container>
        <el-row style="text-align: left; font-size: 10px; margin-left: 6px">
            <el-button type="primary" size="mini" @click="addRow" icon="el-icon-add">新增</el-button>
            <el-button type="primary" size="mini" @click="batchDel" icon="el-icon-add">批量删除</el-button>
        </el-row>
    </el-container>

    <template>
        <el-table
                :data="tableData"
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :default-sort = "{prop: 'indexName', order: 'descending'}">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
                    width="280">
            </el-table-column>
            <el-table-column
                    prop="indexName"
                    label="名称"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    sortable
                    width="80" :formatter="formatSex" >
            </el-table-column>
            <el-table-column
                    prop="displayOrder"
                    label="排序"
                    sortable
                    width="80" >
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="updateRow(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteRow(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>


    <el-dialog v-bind:title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="dialogForm">
            <el-form-item label="id" prop="id" v-show="false" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="indexName"  :label-width="formLabelWidth">
                <el-input v-model="form.indexName" autocomplete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="类型:" prop="type" :label-width="formLabelWidth">
			  <el-radio-group v-model="form.type">
				  <el-radio v-model="form.type" label="01">公有</el-radio>
				  <el-radio v-model="form.type" label="02">私有</el-radio>
			  </el-radio-group>
			</el-form-item>
            
            <el-form-item label="排序:" prop="displayOrder" :label-width="formLabelWidth">
                <el-input v-model.number="form.displayOrder" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="text-align: left; margin-bottom: 12px"
      background
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>


<script type="text/javascript">
    var app = new Vue({
        el: '#vfor2',
        data: {
            tableData: [
                {
                    id: "1",
                    indexName: "test",
                    type: '',
                    displayOrder: ''
                }
            ],
            guideIndexData:'',
            dialogFormVisible: false,
            dialogTitle: "添加",
            form: {
                id:'',
                indexName: '',
                type: '',
                displayOrder: ''
            },
            searchParams: {
            	indexName: '',
            	id: '',
            	type: '02'
            },
            formLabelWidth: '120px',
            formLabelShortWidth: '40px',
            currentPage: 1,
            pageSize: 6,
            total: 0,
            selectionIds: ''
        },
        methods: {
            handleSelectionChange(val) {
            	 this.selectionIds = ''
            	 val.forEach(row => {
            		 console.log(row.id);
            		 this.selectionIds = this.selectionIds+","+ row.id
		          });  
            },
            dateChangelastLogin(val) {
                console.log(val);
                resetPage()
                this.form.lastLoginName = val;
            },
            batchDel(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const formParams = new FormData()
                    formParams.append('ids', this.selectionIds)
                    this.noAyncHttp('${base}/guide/guideIndex/del', formParams).then((res)=>{
                            if(res.success){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                app.loadTableData();
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: '删除失败'
                                });
                            }
                     }, (error)=>{
                            console.error('出错了', error)
                            this.$message({
                                type: 'info',
                                message: '删除失败'
                            });
                     })

                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                });
            },
            searchSubmit(){
            	  app.loadTableData()
            },
            handleSizeChange (val) {
                console.log('每页' + val + '条')
                this.pageSize = val
                app.loadTableData()
            },
            handleCurrentChange (val) {
                console.log('第' + val + '页')
                this.currentPage = val
                app.loadTableData()
            },
            addRow(){
            	 this.dialogFormVisible = true;
            	 if(this.$refs['dialogForm'] !== undefined){
            		 this.form.id = "";
            		 this.$refs['dialogForm'].resetFields();
            	 }
            },
            updateRow(index, row) {
		    	 this.dialogFormVisible = true
		    	 this.form.id = row.id
		    	 this.form.indexName = row.indexName
		    	 this.form.pwd = row.pwd
		    	 this.form.displayOrder = row.displayOrder
		    	 this.form.type = row.type
		    	 this.dialogTitle ="修改"
            },
            deleteRow(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const formParams = new FormData()
                    formParams.append('ids', row.id)
                    this.noAyncHttp('${base}/guide/guideIndex/del', formParams).then((res)=>{
                            if(res.success){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                app.loadTableData();
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: '删除失败'
                                });
                            }
                     }, (error)=>{
                            console.error('出错了', error)
                            this.$message({
                                type: 'info',
                                message: '删除失败'
                            });
                     })

                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                });

            },
            submitForm(){
            	
            	this.$refs["dialogForm"].validate((valid) => {
                    if (valid) {
                        var obj = {};
                        if (this.form.id) {
                        	  obj['id'] = this.form.id
                        }
                        if (this.form.indexName) {
                            obj['indexName'] = this.form.indexName
                        }
                        if (this.form.type) {
                            obj['type'] = this.form.type
                        }
                        if (this.form.displayOrder) {
                            obj['displayOrder'] = this.form.displayOrder
                        }
                        this.noAyncHttp('${base}/guide/guideIndex/saveOrUpdate', obj).then(
                            (res)=>{
                            	 if(res.success){
                                     this.$message({
                                         type: 'success',
                                         message: '操作成功!'
                                     });
                                     this.dialogFormVisible = false
                                     app.loadTableData();
                                 }else{
                                     this.$message({
                                         type: 'info',
                                         message: '操作失败'
                                     });
                                 }
                        }, (error)=>{
                            console.error('出错了', error)
                            this.$message({
                                type: 'info',
                                message: '操作失败'
                            });
                        });
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                });
            	
                
            },
            loadTableData: function () {
                const formParams = new FormData()
                if (this.searchParams.indexName) {
                    formParams.append('indexName', this.searchParams.indexName)
                }
                if (this.searchParams.id) {
                    formParams.append('id', this.searchParams.id)
                }
                if (this.searchParams.type) {
                    formParams.append('type', this.searchParams.type)
                }
                if (this.currentPage) {
                    formParams.append('pageNumber', this.currentPage)
                }
                if (this.pageSize) {
                  	formParams.append('pageSize', this.pageSize)
                }
                this.noAyncHttp('${base}/guide/guideIndex/findByPage', formParams).then(
                    (res)=>{
                    this.tableData = res.data.content
                    this.total = res.data.totalElements
                }, (error)=>{
                    console.error('出错了', error)
                }
              )
            },
            formatSex: function (row, column, cellValue, index) {
    			return row.type == 01 ? '公开' : row.type == 02 ? '私有' : '未知';
    		},
            noAyncHttp(url, params) {
                return new Promise(function (resolve, reject) {
                    axios
                        .post(url, params)
                        .then((response)=>{
                             resolve(response.data)
                        })
                        .catch((error)=>{ // 请求失败处理
                            reject(error)
                        })
                })
            },
            formatTimeToStr (times, pattern) {
            	  let d = new Date(times).format('yyyy-MM-dd hh:mm:ss')
            	  if (pattern) {
            	    d = new Date(times).format(pattern)
            	  }
            	  return d.toLocaleString()
            },
            resetPage() {
                this.currentPage = 1
            }
        }
    })


    app.loadTableData();

</script>

</body>

</html>
